摘要
昨天（Day 5）我們學會了把拖延紀錄存進 LocalStorage，避免重整網頁後資料消失。
但資料現在「藏在瀏覽器裡」，使用者還看不到。
今天，我們要把這些紀錄讀出來，顯示在網頁上，做成「歷史回顧清單」，並且提供「一鍵清空」的功能。

為什麼要做歷史回顧？

看到自己過去的紀錄，更有「持續感」。

• 提升持續感：看到過去紀錄，更想要每天回來填。
• 幫助觀察：常見的拖延原因是什麼？
• 建立儀式感：每天留下小痕跡，才會想要回來繼續填寫

回顧核心流程（Day 5 → Day 6）

昨天的核心流程：
「讀 → parse → push → stringify → setItem」
→ 把新資料寫進去。

今天要反過來：
「讀 → parse → render」
→ 把資料讀出來並畫在頁面上。

實作步驟
接下來會沿用 Day 5 的 index.html、script.js，分別用於「網頁呈現」與「記錄 LocalStorage、渲染歷史清單」。

1. index.html 新增一個「歷史回顧」區塊
   在 HTML 裡加一個 來放清單，還有一個清空按鈕：

   <h2>歷史回顧</h2>
   <ul id="historyList"></ul>
   <button id="clearBtn">清空紀錄</button>
   

2. 渲染紀錄
   在 script.js 裡加一個 renderHistory() 函式：

   function renderHistory() {
     const el = document.getElementById('historyList');
     const records = readRecords().slice().reverse(); // 近的在上
     el.innerHTML = records.length
       ? records.map(r =>
           `<li>[${new Date(r.createdAt).toLocaleString()}] ${r.task} — ${r.reason} ｜「${r.quote}」</li>`
         ).join("")
       : "<li>尚無紀錄</li>";
   }    
   

3. 清空功能

   function clearHistory() {
     localStorage.removeItem(STORAGE_KEY);
     renderHistory();
   }
   
   document.getElementById('clearBtn').addEventListener('click', clearHistory);
   

4. 頁面載入就顯示一次

   renderHistory();
   

怎麼看有沒有成功？

1. 先在 Day 5 做的表單填幾筆資料。

2. 重整頁面 → 歷史清單應該出現。
   

3. 點「清空紀錄」 → 清單變成「尚無紀錄」。
   

邊界情況與提示

• 首筆：如果 LocalStorage 裡沒有資料，renderHistory 會顯示「尚無紀錄」
• 多筆：使用 reverse() 讓最新的在最上面
• 錯誤防護：如果 JSON 壞掉，readRecords() 預設回傳 []

LocalStorage 的小提醒

• 資料是存在使用者瀏覽器，不是真正的資料庫。
• 使用者清除瀏覽器快取，資料也會消失。
• 適合「輕量紀錄」或「暫存資料」，不適合存帳號密碼、API 金鑰等敏感資訊。